<template>
  <div>
    <el-table class="ELtable" ref="tableRef" :data="tableData" style="width: 100%;height:100%;" :row-key="getRowKey"
      @selection-change="changeSelect">
      <el-table-column type="index" width="50" align="center" />
      <el-table-column label="" width="30">
        <el-icon style="cursor: move;">
          <Operation class="drag-handle" />
        </el-icon>
      </el-table-column>
      <el-table-column type="selection" width="30" />
      <el-table-column prop="keyName" label="表达式" style="position: relative;">
        <template #default="{ row }">
          <el-input v-model="row.keyName" placeholder="" clearable @change="handleChangeValue"/>
        </template>
      </el-table-column>
      <el-table-column prop="keyType" label="匹配条件">
        <template #default="{ row }">
          <div class="input-wrap">
            <el-select v-model="row.keyType" @change="handleChangeValue">
              <el-option label="不校验" value="不校验" />
              <el-option label="等于" value="等于" />
              <el-option label="不等于" value="不等于" />
              <el-option label="大于" value="大于" />
              <el-option label="大于等于" value="大于等于" />
              <el-option label="小于" value="小于" />
              <el-option label="小于等于" value="小于等于" />
              <el-option label="包含" value="包含" />
              <el-option label="不包含" value="不包含" />
              <el-option label="以...开始" value="以...开始" />
              <el-option label="以...结束" value="以...结束" />
              <el-option label="为空" value="为空" />
              <el-option label="不为空" value="不为空" />
              <el-option label="正则匹配" value="正则匹配" />
              <el-option label="长度大于" value="长度大于" />
              <el-option label="长度大于等于" value="长度大于等于" />
              <el-option label="长度小于" value="长度小于" />
              <el-option label="长度小于等于" value="长度小于等于" />
              <el-option label="长度等于" value="长度等于" />
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="keyValue" label="匹配值">
        <template #default="{ row }">
          <div class="input-wrap">
            <el-input v-model="row.keyValue" placeholder="" clearable @change="handleChangeValue"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="50" align="center">
        <template #default="{ row }">
          <el-button link @click="removeRow(row)" v-if="tableData.length > 1">
            <el-icon>
              <Remove />
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { Remove, Operation } from '@element-plus/icons-vue'
const tableRef = ref()
const tableData = ref([
  { id: 1, keyName: '', keyValue: '', keyType: '等于' }
] as any)
let selectedTableData = ref([] as any)
const emit = defineEmits(['changeEditMethod', 'selectedTableData', 'allTableData']) // 定义 success 事件，用于操作成功后的回调
let id = 1000

/**
 * 获取表格每行的key
 * */
const getRowKey = (row) => {
  return row.id;
}
/**
 * 表单内容变化时自动增加一行
 * */
const handleChangeValue = () => {
  updateSelectData()
  // 全部数据-用于批量添加
  emit('allTableData', tableData.value)
  // 是否向下添加一行判断
  const isAllNull = tableData.value.some(k => {
    if (!k.keyName && !k.keyValue && !k.keyType) {
      return true
    }
    return false
  })
  // 添加一行并选中
  if (!isAllNull) {
    tableData.value.push({ id: ++id, keyName: '', keyValue: '', keyType: '等于' })
    tableData.value.forEach(item => {
      tableRef.value.toggleRowSelection(item, true)
    })
  }
}
/**
 * 表格数据变化时，更新选中数据
 * */
const updateSelectData = () => {
  selectedTableData.value = tableRef.value.getSelectionRows()
  selectedTableData.value.forEach(item => {
    const current = tableData.value.find(k => k.id == item.id)
    if (current) {
      item.id = current.id
      item.keyName = current.keyName
      item.keyValue = current.keyValue
      item.keyType = current.keyType
    }
  })
  emit('selectedTableData', selectedTableData.value)
}
/**
 * 选中时触发
 * */
const changeSelect = () => {
  selectedTableData.value = tableRef.value.getSelectionRows()
  emit('selectedTableData', selectedTableData.value)
}

/**
 * 移除一行
 * */
const removeRow = (row) => {
  tableData.value.splice(tableData.value.indexOf(row), 1);
}
</script>

<style scoped>
:deep(th.el-table__cell) {
  font-weight: 400;
  /* color: #000; */
}
</style>
